{include file="common/head"}
<style>
    .cate-container {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .cate-img {
        width: 40px;
        height: 40px;
        border-radius: 10px;
    }
</style>
<div class="card  p-3">
    <div class="card-header">
        <div class="toobar">
            <button class="btn btn-primary bg-gradient btn-sm" id="add">添加分类</button>
        </div>
    </div>
    <div class="card-body">
        <table class="table  table-striped  table-hover">
            <thead>
                <tr>
                    <th scope="col">#</th>
                    <th scope="col">分类名称</th>
                    <th scope="col">分类图片</th>
                    <th scope="col">是否展示</th>
                    <th scope="col">权重</th>
                    <th scope="col">创建时间</th>
                    <th scope="col">操作</th>
                </tr>
            </thead>
            <tbody>
                {volist name="list" id="cate"}
                <tr data-id="{$cate.id}">
                    <th scope="row">{$cate.id}</th>
                    <td>{$cate.category}</td>
                    <!-- <img class="cate-img" src="{$cate.img_path}" alt=""> -->
                    <td>父级分类</td>
                    <td data-id="{$cate.id}">
                        {if $cate.is_show == 1}
                        <div class="form-check form-switch">
                            <input class="form-check-input is-show" type="checkbox" role="switch" checked>
                        </div>
                        {else/}
                        <div class="form-check form-switch">
                            <input class="form-check-input is-show" type="checkbox" role="switch">
                        </div>
                        {/if}
                    </td>
                    <td>
                        <input type="text" class="layui-input sort" name="sort" value="{$cate.sort}">
                    </td>
                    <td>{$cate.create_time}</td>
                    <td>
                        <a class="layui-btn layui-btn-xs layui-bg-success  child-tree">查看</a>
                        <a class="layui-btn layui-btn-xs layui-bg-orange  edit">修改</a>
                        <a class="layui-btn layui-btn-xs layui-bg-red  del" onclick="del(this)">删除</a>
                    </td>
                </tr>
                {if $cate.child neq null}
                {volist name="cate.child" id="two"}
                <tr class="two" data-pid="{$two.pid}" data-id="{$two.id}">
                    <th scope="row">{$two.id}</th>
                    <td> |—— {$two.category}</td>
                    <td><img src="{$two.img_path}" alt="" class="cate-img"></td>
                    <td data-id="{$cate.img_path}">
                        {if $cate.is_show == 1}
                        {if $two.is_show == 1}
                        <div class="form-check form-switch">
                            <input class="form-check-input is-show" type="checkbox" role="switch" checked>
                        </div>
                        {else/}
                        <div class="form-check form-switch">
                            <input class="form-check-input is-show" type="checkbox" role="switch">
                        </div>
                        {/if}
                        {else/}
                        <div class="form-check form-switch">
                            <input class="form-check-input is-show" type="checkbox" disabled role="switch">
                        </div>
                        {/if}
                    </td>
                    <td><input type="text" class="layui-input sort" name="sort" value="{$two.sort}"></td>
                    <td>{$two.create_time}</td>
                    <td>
                        <a class="layui-btn layui-btn-xs layui-bg-orange  edit">修改</a>
                        <a class="layui-btn layui-btn-xs layui-bg-red  del" onclick="del(this)">删除</a>
                    </td>
                </tr>
                {if $two.child neq null}
                {volist name="two.child" id="three"}
                <tr class="two" data-pid="{$two.pid}" data-id="{$three.id}">
                    <th scope="row">{$three.id}</th>
                    <td> |——|—— {$three.category}</td>
                    <td><img src="{$three.img_path}" alt="" class="cate-img"></td>
                    <td data-id="{$cate.img_path}">
                        {if $cate.is_show == 1}
                        {if $three.is_show == 1}
                        <div class="form-check form-switch">
                            <input class="form-check-input is-show" type="checkbox" role="switch" checked>
                        </div>
                        {else/}
                        <div class="form-check form-switch">
                            <input class="form-check-input is-show" type="checkbox" role="switch">
                        </div>
                        {/if}
                        {else/}
                        <div class="form-check form-switch">
                            <input class="form-check-input is-show" type="checkbox" disabled role="switch">
                        </div>
                        {/if}
                    </td>
                    <td><input type="text" class="layui-input sort" name="sort" value="{$three.sort}"></td>
                    <td>{$three.create_time}</td>
                    <td>
                        <a class="layui-btn layui-btn-xs layui-bg-orange  edit">修改</a>
                        <a class="layui-btn layui-btn-xs layui-bg-red  del" onclick="del(this)">删除</a>
                    </td>
                </tr>
                {/volist}
                {/if}
                {/volist}
                {/if}
                {/volist}


            </tbody>
        </table>

    </div>
</div>
{include file="common/bottom"}
<script type="text/html" id="addCate">
    <div class="layui-form layui-form-pane"  lay-filter="add" style="margin: 16px;">
        <div class="add-container addImg">
                        <div class="layui-form-item">
            <label class="layui-form-label">分类图片</label>
            <div class="layui-input-block">
                 <div>
                    <button type="button" class="layui-btn" id="ID-upload-demo-btn">
                        <i class="layui-icon layui-icon-upload"></i> 上传
                    </button>
                </div>
                <div style="width: 132px;">
                    <div class="layui-upload-list">
                        <img class="layui-upload-img" id="ID-upload-demo-img" style="width: 100%; height: 92px;">
                        <div id="ID-upload-demo-text"></div>
                    </div>
                    <div class="layui-progress layui-progress-big" lay-showPercent="yes" lay-filter="filter-demo">
                        <div class="layui-progress-bar" lay-percent=""></div>
                    </div>
                </div>
               
            </div>
        </div>
            <div class="layui-form-item">
                    <label class="layui-form-label">分类</label>
                    <div class="layui-input-block">
                    <select name="pid">
                        <option value="-1" disabled>请选择</option>
                        <option value="0">添加父级分类</option>
                        {volist name="list" id="cate"}
                        <option value="{$cate.id}" class="layui-font-blue">{$cate.category}</option>
                            {if $cate.child neq null}
                                {volist name="cate.child" id="two"}
                                <option value="{$two.id}">| --- {$two.category}</option>
                                {/volist}
                            {/if}
                        {/volist}
                    </select>
                    </div>
                </div>  
                <div class="layui-form-item">
                        <label class="layui-form-label">分类名称</label>
                        <div class="layui-input-block">
                        <input type="text" name="category" lay-verify="required" placeholder="请输入分类名称" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item sort">
                        <label class="layui-form-label">权重</label>
                        <div class="layui-input-inline" style="width: 100px;">
                            <input type="number" name="sort" placeholder="" autocomplete="off" value="0" class="layui-input" min="0" step="1" lay-affix="number">
                        </div>
                    </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">是否显示</label>
                            <div class="layui-input-block">
                            <input type="checkbox" name="is_show" checked lay-skin="switch" lay-filter="switchTest" title="ON|OFF">
                            </div>
                        </div>          
                <div class="layui-form-item">
                    <button class="layui-btn layui-btn-fluid" lay-submit lay-filter="add" id="clickBtn">添加分类</button>
                </div>
                </div>
            </div>
</script>
<script>
    layui.use(function () {
        const layer = layui.layer
        const form = layui.form
        const upload = layui.upload;
        const element = layui.element;
        const load = layer.load(0, { shade: 0.3 })
        setTimeout(() => {
            layer.close(load)
        }, 1000)
        function templet(type = 'add', id = '') {
            const ope = layer.open({
                type: 1
                , title: '分类'
                , area: '350px',
                resize: false,
                shadeClose: true,
                content:$('#addCate').html(),
                success: function () {
                    let img_path = ''
                    var uploadInst = upload.render({
                        elem: '#ID-upload-demo-btn',
                        url: '/admin/category/uploadImg',
                        field: 'img',
                        before: function (obj) {
                            // 预读本地文件示例，不支持ie8
                            obj.preview(function (index, file, result) {
                                $('#ID-upload-demo-img').attr('src', result); // 图片链接（base64）
                            });
                            element.progress('filter-demo', '0%'); // 进度条复位
                            layer.msg('上传中', { icon: 16, time: 0 });
                        }, done: function (res) {
                            // 若上传失败
                            if (res.errno > 0) {
                                return layer.msg('上传失败');
                            } else {
                                img_path = res.data.url
                            }
                            $('#ID-upload-demo-text').html(''); // 置空上传失败的状态
                        },
                        error: function () {
                            // 演示失败状态，并实现重传
                            var demoText = $('#ID-upload-demo-text');
                            demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                            demoText.find('.demo-reload').on('click', function () {
                                uploadInst.upload();
                            });
                        },
                        // 进度条
                        progress: function (n, elem, e) {
                            element.progress('filter-demo', n + '%'); // 可配合 layui 进度条元素使用
                            if (n == 100) {
                                layer.msg('上传完毕', { icon: 1 });
                            }
                        }
                    })
                    let url = ''
                    if (type == 'edit') {
                        $('#clickBtn')[0].innerText = '更新分类'
                        url = '/admin/category/update/id/' + id
                        $.ajax({
                            url: '/admin/category/getData/id/' + id
                            , dataType: 'json'
                            , success: (res) => {
                                let data = res.data
                                form.val('add', {
                                    'pid': data.pid
                                    , 'category': data.category
                                    , 'sort': data.sort
                                    , 'is_show': data.is_show
                                })
                                $('#ID-upload-demo-img').attr('src', data.img_path)
                                img_path = data.img_path
                            }
                        })
                    } else {
                        url = '/admin/category/add'
                    }
                    // 对弹层中的表单进行初始化渲染
                    form.render();
                    // 表单提交事件
                    form.on('submit(add)', function (data) {
                        var field = data.field; // 获取表单字段值
                        field['img_path'] = img_path
                        field['is_show'] = field.is_show == 'on' ? '1' : 0
                        // field['img_path'] = img_path
                        $.ajax({
                            url: url
                            , type: 'post'
                            , dataType: 'json'
                            , data: field
                            , success: (res) => {
                                if (res.code) {
                                    layer.msg('操作成功')
                                    // window.location.reload()
                                } else {
                                    layer.msg(res.message, { icon: 5 })
                                }
                            }
                        })
                        layer.close(ope)
                        return false; // 阻止默认 form 跳转
                    });
                }
            });
        }
        $('#add').click(function () {
            templet()
        })

        $('.edit').click(function () {
            let id = $(this).parents()[1].dataset.id
            templet('edit', id)
        })
        // 是否显示分类
        $("input[type='checkbox']").click(function () {
            let id = $(this).parents()[2].dataset.id
            let value = $(this)[0].checked == true ? 1 : 0
            $.ajax({
                url: '/admin/category/update/id/' + id
                , data: {
                    'id': id
                    , 'is_show': value
                }
                , type: 'post'
                , dataType: 'json'
                , success: (res) => {
                    if (res.code) {
                        layer.msg('更新成功', { icon: 6 })
                        // window.location.reload()

                    } else {
                        layer.msg('更新失败', { icon: 5 })
                    }
                }
            })
        })
        $('.sort').change(function () {
            let id = $(this).parents()[1].dataset.id
            let value = $(this).val()
            $.ajax({
                url: '/admin/category/update/id/' + id
                , type: 'post'
                , dataType: 'json'
                , data: {
                    'id': id
                    , 'sort': value
                }
                , success: (res) => {
                    if (res.code) {
                        layer.msg('更新成功')
                        // window.location.reload()
                    } else {
                        layer.msg('更新失败', { icon: 5 })
                    }
                }
            })

        })

    })
    // 删除分类
    function del(it) {
        let id = $(it).parents()[1].dataset.id
        let category = $($(it).parents()[1]).children()[1].innerText
        category = category.split('| --- ')
        category = category[[category.length - 1]]
        layer.confirm('确定要删除分类 [' + category + ']吗？', () => {
            $.ajax({
                url: '/admin/category/del/id/' + id
                , type: 'get'
                , dataType: 'json'
                , success: function (res) {
                    if (res.code) {
                        layer.msg('删除成功', { icon: 6 })
                        // $($(it).parents()[1]).remove()
                        // window.location.reload()
                    } else {
                        layer.msg(res.message, { icon: 5 })
                    }
                }
            })
        })

    }
</script>
<script>
    $('.two').hide()
    $('.child-tree').click(function () {
        let id = $(this).parents()[1].dataset.id
        two = Object.values($('.two'))
        let child = []
        two.forEach(e => {
            if (e.length != 0 && $(e)[0].dataset != undefined) {
                if ($(e)[0].dataset.pid == id) {
                    $(e).toggle()
                } else {
                    $(e).hide()
                }
            }
        });
    })
    for (i = 0; i < $('.child-tree').length; i++) {
        let id = $($('.child-tree')[i]).parents()[1].dataset.id
        two = Object.values($('.two'))
        let child = []
        two.forEach(e => {
            if (e.length != 0 && $(e)[0].dataset != undefined) {
                if ($(e)[0].dataset.pid == id) {
                    child.push(e)
                }
            }
        });
        if (child.length == 0)
            $($('.child-tree')[i]).hide()
    }

</script>
</body>

</html>